<template>
    <div>
        <el-dialog title="修改销售出库单" v-model="localVisible" @close="closeUpdateDialog" width="80%"
            @open="openUpdateDialog">
            <el-form :model="props.salesOutbound" label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="7">
                        <el-form-item label="出库单名称">
                            <el-input v-model="props.salesOutbound.salseName" placeholder="请输入出库单名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="销售订单编号">
                            <el-input v-model="props.salesOutbound.soCode" placeholder="请输入销售订单编号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="客户编码">
                            <el-input v-model="props.salesOutbound.clientCode" placeholder="请输入客户编码"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="7">
                        <el-form-item label="客户名称">
                            <el-input v-model="props.salesOutbound.clientName" placeholder="请输入客户名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="出库日期">
                            <el-date-picker v-model="props.salesOutbound.salseDate" type="datetime"
                                placeholder="请选择出库日期" clearable format="YYYY-MM-DD HH:mm:ss"
                                value-format="YYYY-MM-DD HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注">
                            <el-input type="textarea" v-model="props.salesOutbound.remark"
                                placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <!-- 分割线 -->
            <el-row :gutter="20">
                <el-divider>
                    <span>销售订单产品列信息</span>
                </el-divider>
            </el-row>
            <!-- 按钮 -->
            <el-row :gutter="20">
                <el-button type="primary" plain :icon="Plus" @click="addItem">新增</el-button>
                <el-button type="danger" plain :icon="Delete" @click="deleteItem" :disabled="isDeleteRow">删除</el-button>
            </el-row>

            <!-- 表格数据 -->
            <el-table :data="props.salesOutbound.wmProductSalseLines" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" :selectable="selectable" width="55" />
                <el-table-column label="产品编码" prop="itemCode" />
                <el-table-column label="产品名称" prop="itemName" />
                <el-table-column label="规格型号" prop="specification" />
                <el-table-column label="出库数量" prop="quantitySalse" />
                <el-table-column label="批次号" prop="batchCode" />
                <el-table-column label="仓库名称" prop="warehouseName" />
                <el-table-column label="库区名称" prop="locationName" />
                <el-table-column label="库位名称" prop="areaName" />
                <el-table-column label="备注" prop="remark" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button class="el-button-mini" link type="primary" size="small" :icon="Delete"
                            @click="deleteItem(index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="saveOrder">保存</el-button>
                    <el-button @click="closeUpdateDialog">
                        取消
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <AddSalesOut :addSalesVisible="addSalesVisible" :salesId="props.salesOutbound.salseId"
            @update:addSalesVisible="addSalesVisibleChange"></AddSalesOut>
    </div>
</template>

<script setup>
import { ref, reactive, toRefs, watch } from 'vue'
import { Plus, Delete, EditPen } from '@element-plus/icons-vue'
import { querySalesOutbound, updateSalesOutbound, deleteSalesOutboundLine } from '@/apis/index'
import AddSalesOut from './AddSalesOut.vue';
import { ElMessage } from 'element-plus'
const props = defineProps({
    updateDialogVisible: Boolean,
    salesOutbound: Object
})
const isDeleteRow = ref(true)
const lineIds = ref([])

const addSalesVisible = ref(false)


// 创建本地状态来跟踪对话框的可见性
const localVisible = ref(props.updateDialogVisible);

// 监听父组件传递的prop变化，并同步到本地状态
watch(() => props.updateDialogVisible, (newValue) => {
    localVisible.value = newValue;
});

const emit = defineEmits(['update:updateDialogVisible'])
const closeUpdateDialog = () => {
    localVisible.value = false;
    emit('update:updateDialogVisible', false)
}
const openUpdateDialog = () => { }
const handleSelectionChange = (val) => {
    isDeleteRow.value = !val.length
    lineIds.value = val.map(item => item.lineId)
    console.log("数据", lineIds.value)
}
const selectable = () => true
const deleteItem = async (index, row) => {
    if(row){
       lineIds.value.push(row.lineId) 
    }
    await deleteSalesOutboundLine(lineIds.value)
    const temp = await querySalesOutbound(props.salesOutbound.salseId)
    props.salesOutbound.wmProductSalseLines = temp.wmProductSalseLines
    ElMessage.success("删除成功")
}  
//打开添加销售出库行选择框
const addItem = () => {
    addSalesVisible.value = !addSalesVisible.value
}


//监听添加新增销售订单弹窗事件关闭事件
const addSalesVisibleChange = async (val) => {
    addSalesVisible.value = val
    const result = await querySalesOutbound(props.salesOutbound.salseId)
    props.salesOutbound.wmProductSalseLines = result.wmProductSalseLines
}

const saveOrder = async () => {
    await updateSalesOutbound(props.salesOutbound)
    closeUpdateDialog()
}

</script>

<style scoped></style>
